import React, { useEffect, forwardRef } from 'react';
import UE from 'wangeditor';

interface Props {
  value?: string;
  onChange?: (v: string) => void;
  id: number;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const RichText = (props: Props, ref: any): JSX.Element => {
  const { value, onChange, id } = props;
  const uid = `editor${id}`;

  useEffect(() => {
    const editor = new UE(`#${uid}`);

    editor.customConfig.onchange = function(html: string) {
      onChange && onChange(html);
    };

    editor.create();
    editor.txt.html(value);
  }, [uid, onChange, value]);
  return <div id={uid.toString()}></div>;
};

export default forwardRef(RichText);
